<!DOCTYPE html>
<html>

<head>
  <style>
    #myArea {
      width: 400px;
      height: 400px;
      background-color: #ddd;
      overflow: hidden;
      margin: 150px auto;
    }
  </style>
</head>

<body>
  <div id="myArea">
    <!-- 在这里放置你的区域内容 -->
    <h1>hao123</h1>
  </div>

  <script>
    var area = document.getElementById("myArea");
    var currentScale = 1;  // 初始缩放级别

    // 监听鼠标滚轮事件
    area.addEventListener("wheel", function (event) {
      event.preventDefault(); // 阻止默认的滚轮行为

      // 根据滚轮的delta值判断滚动方向
      var delta = Math.max(-1, Math.min(1, (event.deltaY || -event.detail)));

      // 根据滚轮滚动的方向来调整缩放级别
      if (delta > 0) {  // 向上滚动，放大区域
        currentScale += 0.1;
      } else {  // 向下滚动，缩小区域
        currentScale -= 0.1;
      }

      // 对区域应用缩放变换
      area.style.transform = "scale(" + currentScale + ")";
    });
  </script>
</body>

</html>